<template>
    <div id="main" style="width: 90vw;height: 90vh;" :style="{'margin-left':isCollapse?'0':'-19vh'}">

    </div>
</template>

<script setup>

    import { onMounted,computed,watch } from 'vue';
    import world from '../../assets/world.json';
    import * as echarts from 'echarts';
    import axios from 'axios';
    import { useLoading } from '../../utils/loading';
    const { showLoading, hideLoading } = useLoading();
    import { useSidebarStore } from '../../store/sidebarStore';
    const BASE_URL = import.meta.env.VITE_API_URL;

    const sidebarStore = useSidebarStore();
    const isCollapse = computed(() => sidebarStore.isCollapse);
    const targetCountries = 
    ['China','Korea',
    'Philippines','Thailand','Indonesia','Iran',
    'India','Saudi Arabia',
    'Russia','Greenland',
    'United Kingdom','France',
    'Canada','United States','Mexico',
    'Australia','New Zealand',
    'Brazil','Argentina','Norway',
    'South Africa'];


    // 基于准备好的dom，初始化echarts实例
    var myChart;

    const salesData = [];

    const lines = [];

    onMounted(() => {
        Map()
    });

    watch(isCollapse,async(newVal) => {
        await Map()
    },{ flush: 'post' })

    const Map = async() => {
        initMap();
        showLoading('loading data...');
        const res = await axios.get(`${BASE_URL}manage/countUserByCountry`);
        initData(res.data.data);
        hideLoading();
    }
    const initMap = () =>{
        echarts.registerMap('world', world);
        myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        const option = {
            title: {
                text: 'Global Distribution of After-Sales Warranty Users',
                subtext: 'Data sources: C-end users, distributors',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>Users: {c}'
            },
            visualMap: {
                min: 0,
                max: 2000,
                bottom:'15%',
                left:'10%',
                text: ['high', 'low'],           // 文本，默认为数值文本
                calculable: true,
                color: ['#D3D3D3', '#3F81DB'] // 颜色渐变范围
            },
            series: [
                {
                    name: 'Users',
                    type: 'map',
                    mapType: 'world', // 使用世界地图类型
                    geoIndex: 0,// 省份索引
                    zoom: 1.1,// 缩放比例
                    data: salesData, // 数据格式应为[国家名称, 销量值]的数组形式，如[{name: 'China', value: 1000}]
                    // label: {
                    //     show: true, // 是否显示标签（省份名称）
                    //     formatter: function(params) {
                    //         // 只显示指定国家的标签
                    //         return targetCountries.includes(params.name) ? params.name : '';
                    //     },
                    // },
                    // emphasis: { // 高亮状态下的样式设置，如鼠标悬浮时样式变化等。
                    //     label: {
                    //         show: true, // 高亮时显示标签（省份名称）
                    //     }
                    // },
                    // itemStyle: {
                    //     emphasis: {
                    //         areaColor: '#FF6100'
                    //     }
                    // },
                },
                {
                    data: lines,
                },
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    };

    const initData = (data) => {
        for(let i=0;i<data.length;i++){
            if(data[i].name != 'China'){
                lines.push({
                    fromName: 'Xiamen',
                    toName: data[i].name,
                    coords: [[118.0945,24.4892], [data[i].lon, data[i].lat]],
                    value: Math.random() * 100 // 销量值
                });
            }
            salesData.push({
                name: data[i].name,
                value: data[i].value // 销量值
            });
        }
        // 指定图表的配置项和数据
        const option = {
            geo: {
                map: 'world',
                roam: true,
                zoom: 1.1,
                label: {
                    show: true,  // 默认显示国家名称
                    color: '#000000',
                    fontSize: 12,
                    formatter: function(params) {
                        // 只显示有销售数据的国家名称
                        return targetCountries.includes(params.name) ? params.name : '';
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#F5F5F5',
                        borderColor: '#111111'
                    },
                    emphasis: {
                        areaColor: '#FF6100',
                        borderColor: '#111111'
                    }
                }
            },
            series: [
                {
                    data: salesData,// 销量数据
                },
                {
                    name: 'Sale forecast',
                    type: 'lines',
                    coordinateSystem: 'geo',
                    data: lines,
                    zlevel: 2,
                    large: true,
                    largeThreshold: 100,
                    lineStyle: {
                        normal: {
                            opacity: 0.1,// 透明度
                            width: 1.5,// 线宽
                            curveness: 0.2,// 线的弯曲程度
                        }
                    },
                    progressive: 200,// 动画效果持续时间
                    progressiveThreshold: 500,// 动画效果起始阈值
                    blendMode: 'source-over',
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0.7,
                        color: '#4DC86F',// 飞线动画颜色
                        symbolSize: 5,// 飞线动画大小
                        symbol: 'circle',// 飞线动画形状
                    }
                },
            ]
        };
        myChart.setOption(option);
    };

</script>